<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>JavaScript之面向对象 | 小马过河</title>
    <meta name="generator" content="VuePress 1.8.2">
    <link rel="icon" href="/img/manong.jpg">
    <script src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
    <link rel="manifest" href="/manifest.json">
    <link rel="apple-touch-icon" href="/img/mxx-152-152.png">
    <meta name="description" content="本文讲述什么是js面向对象，js面向对象如何创建以及js的原型和原型链是什么。">
    <meta name="keywords" content="js面向对象, js, 面向对象，js原型，js原型链">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
    <meta name="theme-color" content="#ededed">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="msapplication-TileColor" content="#000000">
    <meta name="msapplication-TileImage" content="/img/mxx-144.png">
    
    <link rel="preload" href="/assets/css/0.styles.154256f1.css" as="style"><link rel="preload" href="/assets/js/app.f1a8d465.js" as="script"><link rel="preload" href="/assets/js/2.5bab2b7d.js" as="script"><link rel="preload" href="/assets/js/90.e15687d5.js" as="script"><link rel="prefetch" href="/assets/js/10.586b05b4.js"><link rel="prefetch" href="/assets/js/100.17640669.js"><link rel="prefetch" href="/assets/js/101.9c523894.js"><link rel="prefetch" href="/assets/js/102.27347aba.js"><link rel="prefetch" href="/assets/js/103.37a029fe.js"><link rel="prefetch" href="/assets/js/104.1d8f728c.js"><link rel="prefetch" href="/assets/js/105.8081ec6e.js"><link rel="prefetch" href="/assets/js/11.28ad280e.js"><link rel="prefetch" href="/assets/js/12.5e108f27.js"><link rel="prefetch" href="/assets/js/13.3678126c.js"><link rel="prefetch" href="/assets/js/14.505a08b7.js"><link rel="prefetch" href="/assets/js/15.8f3c0c53.js"><link rel="prefetch" href="/assets/js/16.4256e6cb.js"><link rel="prefetch" href="/assets/js/17.17d3d968.js"><link rel="prefetch" href="/assets/js/18.73488ae7.js"><link rel="prefetch" href="/assets/js/19.9d056309.js"><link rel="prefetch" href="/assets/js/20.52185694.js"><link rel="prefetch" href="/assets/js/21.3b7e8437.js"><link rel="prefetch" href="/assets/js/22.4d4d8a8b.js"><link rel="prefetch" href="/assets/js/23.dac1a360.js"><link rel="prefetch" href="/assets/js/24.798b5147.js"><link rel="prefetch" href="/assets/js/25.16d30679.js"><link rel="prefetch" href="/assets/js/26.3e5e50ab.js"><link rel="prefetch" href="/assets/js/27.99e01b84.js"><link rel="prefetch" href="/assets/js/28.86b7c539.js"><link rel="prefetch" href="/assets/js/29.ea981f89.js"><link rel="prefetch" href="/assets/js/3.c22f362a.js"><link rel="prefetch" href="/assets/js/30.6c923d43.js"><link rel="prefetch" href="/assets/js/31.df940781.js"><link rel="prefetch" href="/assets/js/32.3e5a19c7.js"><link rel="prefetch" href="/assets/js/33.0936aa71.js"><link rel="prefetch" href="/assets/js/34.566820dc.js"><link rel="prefetch" href="/assets/js/35.e263f3e4.js"><link rel="prefetch" href="/assets/js/36.32ae1d3b.js"><link rel="prefetch" href="/assets/js/37.ac0fe1ce.js"><link rel="prefetch" href="/assets/js/38.5ff1b8eb.js"><link rel="prefetch" href="/assets/js/39.da39237f.js"><link rel="prefetch" href="/assets/js/4.dca68745.js"><link rel="prefetch" href="/assets/js/40.c92cf280.js"><link rel="prefetch" href="/assets/js/41.b2318f21.js"><link rel="prefetch" href="/assets/js/42.9e98acc0.js"><link rel="prefetch" href="/assets/js/43.6a890842.js"><link rel="prefetch" href="/assets/js/44.8c501675.js"><link rel="prefetch" href="/assets/js/45.a7b73149.js"><link rel="prefetch" href="/assets/js/46.08c4dcbb.js"><link rel="prefetch" href="/assets/js/47.0fa3a317.js"><link rel="prefetch" href="/assets/js/48.15f53959.js"><link rel="prefetch" href="/assets/js/49.f9b62975.js"><link rel="prefetch" href="/assets/js/5.49ddc4eb.js"><link rel="prefetch" href="/assets/js/50.5d678fce.js"><link rel="prefetch" href="/assets/js/51.f07100da.js"><link rel="prefetch" href="/assets/js/52.25782c95.js"><link rel="prefetch" href="/assets/js/53.1151ca9a.js"><link rel="prefetch" href="/assets/js/54.86132d90.js"><link rel="prefetch" href="/assets/js/55.5e273c50.js"><link rel="prefetch" href="/assets/js/56.94d89ae7.js"><link rel="prefetch" href="/assets/js/57.ff4f6ce5.js"><link rel="prefetch" href="/assets/js/58.d6bba7bf.js"><link rel="prefetch" href="/assets/js/59.fd39aa8f.js"><link rel="prefetch" href="/assets/js/6.73ba3b93.js"><link rel="prefetch" href="/assets/js/60.3b547209.js"><link rel="prefetch" href="/assets/js/61.c2746621.js"><link rel="prefetch" href="/assets/js/62.c7246830.js"><link rel="prefetch" href="/assets/js/63.8cf018aa.js"><link rel="prefetch" href="/assets/js/64.5982f68e.js"><link rel="prefetch" href="/assets/js/65.6a323f0b.js"><link rel="prefetch" href="/assets/js/66.df6d599d.js"><link rel="prefetch" href="/assets/js/67.5c26c24c.js"><link rel="prefetch" href="/assets/js/68.e53dceea.js"><link rel="prefetch" href="/assets/js/69.65ee4851.js"><link rel="prefetch" href="/assets/js/7.541920c5.js"><link rel="prefetch" href="/assets/js/70.4bfafea4.js"><link rel="prefetch" href="/assets/js/71.b4f496a8.js"><link rel="prefetch" href="/assets/js/72.1b1ffea6.js"><link rel="prefetch" href="/assets/js/73.8929e1c4.js"><link rel="prefetch" href="/assets/js/74.d3c5fcad.js"><link rel="prefetch" href="/assets/js/75.9d01a456.js"><link rel="prefetch" href="/assets/js/76.3149b796.js"><link rel="prefetch" href="/assets/js/77.3abe6bd4.js"><link rel="prefetch" href="/assets/js/78.ae477312.js"><link rel="prefetch" href="/assets/js/79.00837d52.js"><link rel="prefetch" href="/assets/js/8.a50175f7.js"><link rel="prefetch" href="/assets/js/80.d626622b.js"><link rel="prefetch" href="/assets/js/81.ad2df06d.js"><link rel="prefetch" href="/assets/js/82.9ac0d88a.js"><link rel="prefetch" href="/assets/js/83.b23219b4.js"><link rel="prefetch" href="/assets/js/84.55f2741f.js"><link rel="prefetch" href="/assets/js/85.33b715e5.js"><link rel="prefetch" href="/assets/js/86.85aea4fa.js"><link rel="prefetch" href="/assets/js/87.6fd2f3fa.js"><link rel="prefetch" href="/assets/js/88.a9ea00b4.js"><link rel="prefetch" href="/assets/js/89.7e58e472.js"><link rel="prefetch" href="/assets/js/9.83acbe8c.js"><link rel="prefetch" href="/assets/js/91.026b108a.js"><link rel="prefetch" href="/assets/js/92.840afd12.js"><link rel="prefetch" href="/assets/js/93.00439ef2.js"><link rel="prefetch" href="/assets/js/94.6c994a63.js"><link rel="prefetch" href="/assets/js/95.e3dd6367.js"><link rel="prefetch" href="/assets/js/96.cbe1207c.js"><link rel="prefetch" href="/assets/js/97.34584059.js"><link rel="prefetch" href="/assets/js/98.9b2de21d.js"><link rel="prefetch" href="/assets/js/99.95d4993f.js">
    <link rel="stylesheet" href="/assets/css/0.styles.154256f1.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="layout-wrapper"><!----> <div class="theme-container"><header class="navbar ele-navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><img src="/img/manong.jpg" alt="小马过河" class="logo"> <span class="site-name can-hide">小马过河</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><!----> <a href="/" class="nav-link">
  首页
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="导航" class="dropdown-title"><span class="title">导航</span> <span class="arrow down"></span></button> <button type="button" aria-label="导航" class="mobile-dropdown-title"><span class="title">导航</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/nav/nav.html" class="nav-link">
  常用站点
</a></li><li class="dropdown-item"><!----> <a href="/nav/web.html" class="nav-link">
  前端站点
</a></li><li class="dropdown-item"><!----> <a href="/nav/afterEnd.html" class="nav-link">
  后端站点
</a></li></ul></div> <!----></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="前端" class="dropdown-title"><span class="title">前端</span> <span class="arrow down"></span></button> <button type="button" aria-label="前端" class="mobile-dropdown-title"><span class="title">前端</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>
          CSS+HTML系列
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/web/csshtml/css-formatContent.html" class="nav-link">
  CSS格式化上下文
</a></li><li class="dropdown-subitem"><a href="/web/csshtml/css-bfc.html" class="nav-link">
  CSS的BFC
</a></li></ul></li><li class="dropdown-item"><h4>
          JS系列
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/web/js/js-prototype.html" class="nav-link">
  JS-原型与原型链
</a></li><li class="dropdown-subitem"><a href="/web/js/js-context.html" class="nav-link">
  JS-执行上下文
</a></li></ul></li><li class="dropdown-item"><h4>
          Vue2系列
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/web/vue/mvvm.html" class="nav-link">
  Vue响应式
</a></li></ul></li><li class="dropdown-item"><h4>
          常见面试题
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/web/question/css.html" class="nav-link">
  CSS面试题
</a></li><li class="dropdown-subitem"><a href="/web/question/vue.html" class="nav-link">
  Vue2.x面试题
</a></li></ul></li></ul></div> <!----></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Java" class="dropdown-title"><span class="title">Java</span> <span class="arrow down"></span></button> <button type="button" aria-label="Java" class="mobile-dropdown-title"><span class="title">Java</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>
          基础系列
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/java/basics/know.html" class="nav-link">
  Java初识
</a></li><li class="dropdown-subitem"><a href="/java/basics/number.html" class="nav-link">
  Java数字
</a></li><li class="dropdown-subitem"><a href="/java/basics/string.html" class="nav-link">
  Java字符串
</a></li></ul></li><li class="dropdown-item"><h4>
          集合
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/java/collection/collection.html" class="nav-link">
  Collection集合
</a></li><li class="dropdown-subitem"><a href="/java/collection/list.html" class="nav-link">
  List集合
</a></li></ul></li><li class="dropdown-item"><h4>
          IO操作
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/java/io/" class="nav-link">
  IO初识
</a></li></ul></li><li class="dropdown-item"><h4>
          网络编程
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/java/network/ip.html" class="nav-link">
  IP操作
</a></li></ul></li><li class="dropdown-item"><h4>
          JDBC操作
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/java/jdbc/mysql-connect.html" class="nav-link">
  MySQL操作
</a></li></ul></li></ul></div> <!----></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="数据库" class="dropdown-title"><span class="title">数据库</span> <span class="arrow down"></span></button> <button type="button" aria-label="数据库" class="mobile-dropdown-title"><span class="title">数据库</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>
          MySQL系列
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/database/mysql/init.html" class="nav-link">
  常用语法
</a></li><li class="dropdown-subitem"><a href="/database/mysql/data-type.html" class="nav-link">
  数据类型
</a></li></ul></li></ul></div> <!----></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="设计模式" class="dropdown-title"><span class="title">设计模式</span> <span class="arrow down"></span></button> <button type="button" aria-label="设计模式" class="mobile-dropdown-title"><span class="title">设计模式</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/designMode/observer.html" class="nav-link">
  观察者模式
</a></li></ul></div> <!----></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="运维/工具" class="dropdown-title"><span class="title">运维/工具</span> <span class="arrow down"></span></button> <button type="button" aria-label="运维/工具" class="mobile-dropdown-title"><span class="title">运维/工具</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>
          Maven
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/tools/maven/" class="nav-link">
  初识
</a></li></ul></li><li class="dropdown-item"><h4>
          Tomcat
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/tools/tomcat/" class="nav-link">
  初识
</a></li></ul></li></ul></div> <!----></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="English" class="dropdown-title"><span class="title">English</span> <span class="arrow down"></span></button> <button type="button" aria-label="English" class="mobile-dropdown-title"><span class="title">English</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>
          英语读音
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/english/pronunciation/phonogram.html" class="nav-link">
  音标
</a></li></ul></li><li class="dropdown-item"><h4>
          英语单词
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/english/word/call.html" class="nav-link">
  电话
</a></li><li class="dropdown-subitem"><a href="/english/word/daily-life.html" class="nav-link">
  日常生活
</a></li><li class="dropdown-subitem"><a href="/english/word/animal.html" class="nav-link">
  动物
</a></li></ul></li><li class="dropdown-item"><h4>
          英语语法
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/english/grammar/sentence.html" class="nav-link">
  句子成分
</a></li></ul></li></ul></div> <!----></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Study" class="dropdown-title"><span class="title">Study</span> <span class="arrow down"></span></button> <button type="button" aria-label="Study" class="mobile-dropdown-title"><span class="title">Study</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/study/computers/" class="nav-link">
  计算机基础
</a></li><li class="dropdown-item"><!----> <a href="/study/web/" class="nav-link">
  前端知识路线
</a></li><li class="dropdown-item"><!----> <a href="/study/java/" class="nav-link">
  Java知识路线
</a></li></ul></div> <!----></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Self" class="dropdown-title"><span class="title">Self</span> <span class="arrow down"></span></button> <button type="button" aria-label="Self" class="mobile-dropdown-title"><span class="title">Self</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/self/work/" class="nav-link">
  工作
</a></li></ul></div> <!----></div> <!----></nav> <div class="loginItem"><!----></div></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><!----> <a href="/" class="nav-link">
  首页
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="导航" class="dropdown-title"><span class="title">导航</span> <span class="arrow down"></span></button> <button type="button" aria-label="导航" class="mobile-dropdown-title"><span class="title">导航</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/nav/nav.html" class="nav-link">
  常用站点
</a></li><li class="dropdown-item"><!----> <a href="/nav/web.html" class="nav-link">
  前端站点
</a></li><li class="dropdown-item"><!----> <a href="/nav/afterEnd.html" class="nav-link">
  后端站点
</a></li></ul></div> <!----></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="前端" class="dropdown-title"><span class="title">前端</span> <span class="arrow down"></span></button> <button type="button" aria-label="前端" class="mobile-dropdown-title"><span class="title">前端</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>
          CSS+HTML系列
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/web/csshtml/css-formatContent.html" class="nav-link">
  CSS格式化上下文
</a></li><li class="dropdown-subitem"><a href="/web/csshtml/css-bfc.html" class="nav-link">
  CSS的BFC
</a></li></ul></li><li class="dropdown-item"><h4>
          JS系列
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/web/js/js-prototype.html" class="nav-link">
  JS-原型与原型链
</a></li><li class="dropdown-subitem"><a href="/web/js/js-context.html" class="nav-link">
  JS-执行上下文
</a></li></ul></li><li class="dropdown-item"><h4>
          Vue2系列
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/web/vue/mvvm.html" class="nav-link">
  Vue响应式
</a></li></ul></li><li class="dropdown-item"><h4>
          常见面试题
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/web/question/css.html" class="nav-link">
  CSS面试题
</a></li><li class="dropdown-subitem"><a href="/web/question/vue.html" class="nav-link">
  Vue2.x面试题
</a></li></ul></li></ul></div> <!----></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Java" class="dropdown-title"><span class="title">Java</span> <span class="arrow down"></span></button> <button type="button" aria-label="Java" class="mobile-dropdown-title"><span class="title">Java</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>
          基础系列
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/java/basics/know.html" class="nav-link">
  Java初识
</a></li><li class="dropdown-subitem"><a href="/java/basics/number.html" class="nav-link">
  Java数字
</a></li><li class="dropdown-subitem"><a href="/java/basics/string.html" class="nav-link">
  Java字符串
</a></li></ul></li><li class="dropdown-item"><h4>
          集合
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/java/collection/collection.html" class="nav-link">
  Collection集合
</a></li><li class="dropdown-subitem"><a href="/java/collection/list.html" class="nav-link">
  List集合
</a></li></ul></li><li class="dropdown-item"><h4>
          IO操作
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/java/io/" class="nav-link">
  IO初识
</a></li></ul></li><li class="dropdown-item"><h4>
          网络编程
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/java/network/ip.html" class="nav-link">
  IP操作
</a></li></ul></li><li class="dropdown-item"><h4>
          JDBC操作
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/java/jdbc/mysql-connect.html" class="nav-link">
  MySQL操作
</a></li></ul></li></ul></div> <!----></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="数据库" class="dropdown-title"><span class="title">数据库</span> <span class="arrow down"></span></button> <button type="button" aria-label="数据库" class="mobile-dropdown-title"><span class="title">数据库</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>
          MySQL系列
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/database/mysql/init.html" class="nav-link">
  常用语法
</a></li><li class="dropdown-subitem"><a href="/database/mysql/data-type.html" class="nav-link">
  数据类型
</a></li></ul></li></ul></div> <!----></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="设计模式" class="dropdown-title"><span class="title">设计模式</span> <span class="arrow down"></span></button> <button type="button" aria-label="设计模式" class="mobile-dropdown-title"><span class="title">设计模式</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/designMode/observer.html" class="nav-link">
  观察者模式
</a></li></ul></div> <!----></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="运维/工具" class="dropdown-title"><span class="title">运维/工具</span> <span class="arrow down"></span></button> <button type="button" aria-label="运维/工具" class="mobile-dropdown-title"><span class="title">运维/工具</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>
          Maven
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/tools/maven/" class="nav-link">
  初识
</a></li></ul></li><li class="dropdown-item"><h4>
          Tomcat
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/tools/tomcat/" class="nav-link">
  初识
</a></li></ul></li></ul></div> <!----></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="English" class="dropdown-title"><span class="title">English</span> <span class="arrow down"></span></button> <button type="button" aria-label="English" class="mobile-dropdown-title"><span class="title">English</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>
          英语读音
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/english/pronunciation/phonogram.html" class="nav-link">
  音标
</a></li></ul></li><li class="dropdown-item"><h4>
          英语单词
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/english/word/call.html" class="nav-link">
  电话
</a></li><li class="dropdown-subitem"><a href="/english/word/daily-life.html" class="nav-link">
  日常生活
</a></li><li class="dropdown-subitem"><a href="/english/word/animal.html" class="nav-link">
  动物
</a></li></ul></li><li class="dropdown-item"><h4>
          英语语法
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/english/grammar/sentence.html" class="nav-link">
  句子成分
</a></li></ul></li></ul></div> <!----></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Study" class="dropdown-title"><span class="title">Study</span> <span class="arrow down"></span></button> <button type="button" aria-label="Study" class="mobile-dropdown-title"><span class="title">Study</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/study/computers/" class="nav-link">
  计算机基础
</a></li><li class="dropdown-item"><!----> <a href="/study/web/" class="nav-link">
  前端知识路线
</a></li><li class="dropdown-item"><!----> <a href="/study/java/" class="nav-link">
  Java知识路线
</a></li></ul></div> <!----></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Self" class="dropdown-title"><span class="title">Self</span> <span class="arrow down"></span></button> <button type="button" aria-label="Self" class="mobile-dropdown-title"><span class="title">Self</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/self/work/" class="nav-link">
  工作
</a></li></ul></div> <!----></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>CSS+HTML系列</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/web/csshtml/css-formatContent.html" class="sidebar-link">CSS-格式化上下文</a></li><li><a href="/web/csshtml/css-bfc.html" class="sidebar-link">CSS-BFC</a></li></ul></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>JS系列</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Vue2.x系列</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Vue3.x系列</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>常见面试题</span> <span class="arrow right"></span></p> <!----></section></li></ul> </aside> <main class="page"> <div class="main"><div class="content"><div class="theme-default-content content__default"><h1 id="javascript之面向对象"><a href="#javascript之面向对象" class="header-anchor">#</a> JavaScript之面向对象</h1> <p></p><div class="table-of-contents"><ul><li><a href="#概念">概念</a></li><li><a href="#创建对象的方法">创建对象的方法</a><ul><li><a href="#对象字面量">对象字面量</a></li><li><a href="#new实例化对象">New实例化对象</a></li><li><a href="#object-creat">Object.creat()</a></li></ul></li><li><a href="#原型和原型链">原型和原型链</a></li></ul></div><p></p> <p>🐴</p> <h2 id="概念"><a href="#概念" class="header-anchor">#</a> 概念</h2> <p>面向对象（<code>Object-oriented, OO</code>）的语言有一个标志，那就是它们都有类的概念，而通过类可以创建任意多个具有相同属性和方法的对象。在<code>ES5</code>中是没有类的概念，但是<code>ES6</code>中有类的概念。</p> <p>在js中的对象是无序属性集合，属性可以包含基本值、对象、或者函数，并以名值形式存在。</p> <h2 id="创建对象的方法"><a href="#创建对象的方法" class="header-anchor">#</a> 创建对象的方法</h2> <h3 id="对象字面量"><a href="#对象字面量" class="header-anchor">#</a> 对象字面量</h3> <p>这种中创建对象的方式是我们经常用到的</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> Cat <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token comment">// 创建了一个动物</span>
    name<span class="token operator">:</span><span class="token string">'猫'</span><span class="token punctuation">,</span>  <span class="token comment">// 名字叫猫 （属性值是字符串）</span>
    color<span class="token operator">:</span><span class="token string">'white'</span><span class="token punctuation">,</span> <span class="token comment">// 颜色白色 （属性值是字符串）</span>
    age<span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token comment">// 年龄 3 岁 （属性值是数字）</span>
    <span class="token function-variable function">eat</span><span class="token operator">:</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span> <span class="token comment">// 会吃老鼠 （属性值是函数）</span>
        <span class="token keyword">return</span> <span class="token string">'老鼠'</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><p>一般我们将属性值为函数的叫做该对象的方法，比如上面猫会吃老鼠<code>eat</code> 就是它的方法。</p> <h3 id="new实例化对象"><a href="#new实例化对象" class="header-anchor">#</a> New实例化对象</h3> <ul><li>内置构造函数，通过<code>new</code>操作符实例化为对象</li></ul> <p>比如</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">new</span> <span class="token class-name">Array</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token keyword">new</span> <span class="token class-name">String</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token keyword">new</span> <span class="token class-name">Number</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token keyword">new</span> <span class="token class-name">Object</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</code></pre></div><p>上边这些js内置的构造函数也是js的对象。</p> <ul><li>自定义构造函数,并实例化为对象</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">Dog</span><span class="token punctuation">(</span><span class="token parameter">name</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>name <span class="token operator">=</span> name
    <span class="token keyword">this</span><span class="token punctuation">.</span>color <span class="token operator">=</span> <span class="token string">&quot;black&quot;</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>age <span class="token operator">=</span> <span class="token number">4</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function-variable function">eat</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;屎&quot;</span><span class="token punctuation">)</span> 
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
        
<span class="token keyword">var</span> Dog1 <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Dog</span><span class="token punctuation">(</span><span class="token string">&quot;旺旺&quot;</span><span class="token punctuation">)</span>
<span class="token keyword">var</span> Dog2 <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Dog</span><span class="token punctuation">(</span><span class="token string">&quot;仔仔&quot;</span><span class="token punctuation">)</span>

Dog1<span class="token punctuation">.</span>name <span class="token comment">// &quot;旺旺&quot;</span>
Dog2<span class="token punctuation">.</span>name <span class="token comment">// &quot;仔仔&quot;</span>
</code></pre></div><p>上面<code>Dog1</code>和<code>Dog2</code>就是我们自己写的实例化对象，这两个对象互不影响，这里可以这么理解函数<code>Dog</code> 指的是颜色为黑色，年龄为4，会吃翔的狗，而这类狗有很多个，下边我们使用<code>new</code> 创建出来的构造函数（对象）就相当于具体是哪只狗,<code>Dog1</code>是老李家的叫&quot;旺旺&quot;，<code>Dog2</code>是老王家的叫&quot;仔仔&quot;,比如老李将他家的狗颜色染成了白色，老王家的狗颜色是不会受影响的，就像下面代码</p> <div class="language-js extra-class"><pre class="language-js"><code>Dog1<span class="token punctuation">.</span>color <span class="token operator">=</span> <span class="token string">&quot;white&quot;</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>Dog1<span class="token punctuation">.</span>color<span class="token punctuation">)</span> <span class="token comment">// 'white'</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>Dog2<span class="token punctuation">.</span>color<span class="token punctuation">)</span> <span class="token comment">// 'black'</span>
</code></pre></div><h3 id="object-creat"><a href="#object-creat" class="header-anchor">#</a> Object.creat()</h3> <p>第三种方式就是使用 <code>Object.creat()</code> 去创建对象</p> <div class="language-js extra-class"><pre class="language-js"><code> <span class="token keyword">var</span> emptryObj <span class="token operator">=</span> Object<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token keyword">null</span><span class="token punctuation">)</span> <span class="token comment">// 创建一个空对象</span>
</code></pre></div><p>上边我们创建了一个空对象，该空对象和上边的字面量对象<code>{}</code> 是不同的，<code>Object.create(null)</code> 创建的空对象没有任何属性也没有原型链。而字面量对象<code>{}</code>是存在原型<code>prototype</code>的。</p> <div class="language-js extra-class"><pre class="language-js"><code> <span class="token keyword">var</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span>
    name<span class="token operator">:</span><span class="token string">&quot;玛莎拉蒂&quot;</span><span class="token punctuation">,</span>
    color<span class="token operator">:</span><span class="token string">'red'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span>
 <span class="token keyword">var</span> Car <span class="token operator">=</span> Object<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span>obj<span class="token punctuation">)</span> <span class="token comment">// 创建一个以obj对象为原型的对象</span>
 
 Car<span class="token punctuation">.</span>name <span class="token comment">// &quot;玛莎拉蒂&quot;</span>
</code></pre></div><p>上边创建的Car 对象它继承obj，也就Car原型链指向的是obj。</p> <div class="language-js extra-class"><pre class="language-js"><code>Car<span class="token punctuation">.</span>__proto__ <span class="token operator">===</span> obj <span class="token comment">// true</span>
</code></pre></div><p><code>Object.creat()</code> 它还有第二个参数，第二个参数是一个对象，来定义属性的特性。</p> <div class="language-js extra-class"><pre class="language-js"><code> <span class="token keyword">var</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span>
    color<span class="token operator">:</span><span class="token string">'red'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span>
 <span class="token keyword">var</span> Car <span class="token operator">=</span> Object<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span>obj<span class="token punctuation">,</span><span class="token punctuation">{</span>
     name<span class="token operator">:</span><span class="token punctuation">{</span> <span class="token comment">//定义属性name 的特性</span>
        writable<span class="token operator">:</span><span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">// 是否可写入,false 为不能修改name</span>
        configurable<span class="token operator">:</span><span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// 是否可配置，true为可以配置</span>
        value<span class="token operator">:</span><span class="token string">&quot;玛莎拉蒂&quot;</span><span class="token punctuation">,</span> <span class="token comment">// 给name属性附值</span>
     <span class="token punctuation">}</span>
 <span class="token punctuation">}</span><span class="token punctuation">)</span>

Car<span class="token punctuation">.</span>name <span class="token comment">// &quot;玛莎拉蒂&quot;</span>
Car<span class="token punctuation">.</span>color <span class="token comment">// 'red'</span>

Car<span class="token punctuation">.</span>name <span class="token operator">=</span> <span class="token string">&quot;宝马&quot;</span> <span class="token comment">// name值不会被改变</span>
Car<span class="token punctuation">.</span>color <span class="token operator">=</span> <span class="token string">'black'</span> <span class="token comment">// color值改变了</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>Car<span class="token punctuation">.</span>name<span class="token punctuation">)</span> <span class="token comment">// &quot;玛莎拉蒂&quot; </span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>Car<span class="token punctuation">.</span>color<span class="token punctuation">)</span> <span class="token comment">// 'black'</span>
</code></pre></div><div class="custom-block tip"><p class="custom-block-title">TIP</p> <p><code>Object.creat()</code> 创建出来的对象，原型链指向<code>Object.creat()</code>中的第一个参数，如果第一个参数是<code>null</code>,那么就会创建一个空对象（没有原型链），而 <code>new Object()</code>创建的对象，是存在原型链的，并且它的原型链默认指向<code>Object</code></p></div> <h2 id="原型和原型链"><a href="#原型和原型链" class="header-anchor">#</a> 原型和原型链</h2> <p>首先es5 中不包含传统类继承模型的，而是使用 <code>prototype</code>原型模型。js很多对象是有原型<code>prototype</code>,当然也有一些对象不存在原型，例如：<code>Object.prototype</code> 和 <code>Object.create(null)</code>以及使用 <code>new</code> 创建的构造函数。</p> <ul><li><p>原型（<code>prototype</code>）:在javaScript中，每当定义一个对象（个别对象不含有原型）时候，对象中都会包含一些预定义的属性，其中每个函数对象都有一个<code>prototype</code>属性，这个属性指的就是它的原型对象。</p></li> <li><p>原型链（<code>__proto__</code>）:当一个对象需要引用一个属性时，js引擎首先会从这个对象自身的属性表中寻找这个属性标识，如果找到则进行相应读写操作，若没有找到，就在<code>__proto__</code>属性引用的对象的属性表中查找，如此查找，直到找到这个属性或者<code>__proto__</code>属性指向为 <code>null</code>，就会停止查找，属性返回<code>undefind</code>，这个<code>__proto__</code>引用链就被称为原型链。</p></li></ul></div> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">最近更新时间:</span> <span class="time">7/2/2021, 11:27:27 AM</span></div></footer> <!----></div> <div class="floatSilder hidden-sm-and-down"><div class="floatSilderWrapper" data-v-4100c7a9><div class="topTitle" data-v-4100c7a9>JavaScript之面向对象</div> <div class="contentNav" data-v-4100c7a9><ul class="nav" data-v-4100c7a9><li class="title" data-v-4100c7a9><a href="#概念" data-v-4100c7a9>概念</a></li><li class="title" data-v-4100c7a9><a href="#创建对象的方法" data-v-4100c7a9>创建对象的方法</a></li><li class="subTitle" data-v-4100c7a9><a href="#对象字面量" data-v-4100c7a9>对象字面量</a></li><li class="subTitle" data-v-4100c7a9><a href="#new实例化对象" data-v-4100c7a9>New实例化对象</a></li><li class="subTitle" data-v-4100c7a9><a href="#object-creat" data-v-4100c7a9>Object.creat()</a></li><li class="title" data-v-4100c7a9><a href="#原型和原型链" data-v-4100c7a9>原型和原型链</a></li></ul></div></div></div></div> </main></div></div><div class="global-ui"><!----></div></div>
    <script src="/assets/js/app.f1a8d465.js" defer></script><script src="/assets/js/2.5bab2b7d.js" defer></script><script src="/assets/js/90.e15687d5.js" defer></script>
  </body>
</html>
